<template>
<div>
  <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/coursemenu' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/stuworkview' }">作业</el-breadcrumb-item>
          <el-breadcrumb-item>作业详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="开始时间" prop="firsttime"></el-table-column>
    <el-table-column label="结束时间" prop="endtime"></el-table-column>
    <el-table-column label="课程名称" prop="coursename"></el-table-column>
    <el-table-column label="作业内容" prop="worktext">
      <template slot-scope="scope">
      
        <el-button @click="dialogVisible = true" type="text" size="small">查看详情</el-button>
        <el-dialog
          title="作业内容"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose"
        >
          <span>{{scope.row.worktext}}</span>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="download(scope.row.url), dialogVisible = false">下 载
            </el-button>
          </span>
        </el-dialog>
      </template>
    </el-table-column>
    <el-table-column>
      <!-- <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/>
      </template>-->
      <template slot-scope="scope">
        <el-button align="right" type="primary" @click="dialogup = true">上传作业</el-button>
        <el-dialog title="作业内容" :visible.sync="dialogup" width="30%" :before-close="handleClose">
             <el-upload
            class="upload-demo"
            action
            :http-request="multipartUpload"
            :file-list="fileList2"
            list-type="picture"
          >
            <el-button size="small" type="primary">选择作业</el-button>
          </el-upload>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="upl(scope.row.workid), dialogup = false">上传</el-button>
          </span>
        </el-dialog>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<script>
import { client } from "../../util/alioss";
import { getStore } from "../../libs/storage";
export default {
  data() {
    return {
        fileList2:[],
      tableData: [],
      courses: [],
      search: "",
      dialogVisible: false,
      dialogup: false,
      workurl: ""
    };
  },
  created() {
    this.selected();
    this.workview();
  },
  methods: {
      
   async multipartUpload(file)
   {
        var fileName = "coursevide/" + file.file.uid + "/" + file.file.name;
      //定义唯一的文件名，打印出来的uid其实就是时间戳,/前为文件夹
     
   let result= client().multipartUpload(fileName, file.file);
    //let result= client().put(fileName, file.file);
      console.log(result);
     // console.log(res);
      this.workurl =
        "http://team6.oss-cn-beijing.aliyuncs.com/" + fileName;
      //console.log(this.addCouForm)
      console.log(this.workurl);
    //   this.$axios
   },
    //查找已加入课程
    selected() {
      this.$axios
        .post("/stucoursed", {
          studentid: getStore("stuid"),
        })
        .then(resp => {
          if (resp && resp.status === 200) {
            //this.books = resp.data;console.log(this.books.id);
            this.courses = resp.data;
            console.log(this.courses);
            console.log("------------");
            console.log(resp.data);
            //return this.$message.success("成功");
          }
        })
        .catch(failResponse => {
          console.log(failResponse.responseResult);
          console.log(getStore("stuid"));
          return this.$message.info("失败");
        });
    },
    //上传作业
    upl(id) {
      console.log("开始");
      console.log(getStore("stuName"));
      this.$axios
        .post("/stuworkup", {
          stuid: getStore("stuid"),
          workid: id,
          stuname: getStore("stuName"),
          url: this.workurl
        })
        .then(resp => {
          if (resp && resp.status === 200) {
            console.log(resp.data);
            return;
          }
        })
        .catch(failResponse => {
          console.log(failResponse.responseResult);
        });
    },
    workview() {
      console.log("开始");
      var _this = this;
      this.$axios
        .post("/stuwork", {
          courseid: this.$route.params.courseid,
        })
        .then(resp => {
          if (resp && resp.status === 200) {
            this.tableData = resp.data;
            console.log(this.tableData);
            return;
          }
        })
        .catch(failResponse => {
          console.log(failResponse.responseResult);
        });
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    download(url){
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url;
      link.click();
    },
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 4) {
        return value.slice(0, 4) + "...";
      }
      return value;
    }
  }
};
</script>

<style>
</style>